<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue动画封装</title>
	<script src="js/vue.js"></script>
	<style>
		.v-enter,.v-leave-to{
			opacity: 0;
		}
		.v-enter-active,.v-leave-active{
			-webkit-transition: opacity .3s;
			transition: opacity .3s;
		}
	</style>
</head>
<body>
<div id="app">
<fade :show="show">
		<h1>hello world</h1>
</fade>
<fade :show="show">
		<h2>hello world</h2>
</fade>
<fade :show="show">
		<h3>hello world</h3>
</fade>
<button @click="handleclick">change</button>
</div>
<script>
Vue.component('fade',{
  props:['show'],
  template: `
  <transition @before-enter="handleBeforeEnter"
              @enter="handleEnter"
               >
  <slot v-if="show"></slot>
  </transition>`
	,
	methods:{
		handleBeforeEnter:function(el){
			el.style.color = 'red'
		},
		handleEnter:function (el, done) {
			setTimeout(()=>{
				el.style.color = 'green'
				done()
			},3000)
		}
	}
});
let app = new Vue({
    el:"#app",
	data:{
     show:false
	},
	methods:{
		handleclick:function () {
		  this.show = !this.show
		}
	}
})
</script>
</body>
</html>